<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <html>

    <head>
        <title>读者注册</title>
        <link rel="shortcut icon" href="img/library.ico" />
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <script src="js/jquery-3.2.1.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <style>
            body {
                min-height: 100vh;
                margin: 0;
                padding: 0;
                background: url('img/regist_bg.png') no-repeat center center fixed;
                background-size: cover;
                position: relative;
            }

            body::before {
                content: '';
                position: fixed;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                background: rgba(255, 255, 255, 0.65);
                z-index: 0;
            }

            .register-container {
                min-height: 100vh;
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;
                z-index: 1;
            }

            .register-card {
                background: rgba(255, 255, 255, 0.92);
                border-radius: 20px;
                box-shadow: 0 10px 40px 0 rgba(31, 38, 135, 0.25);
                padding: 45px;
                max-width: 600px;
                width: 100%;
                margin: 20px;
                backdrop-filter: blur(8px);
                border: 1px solid rgba(255, 255, 255, 0.18);
            }

            .register-title {
                font-size: 28px;
                font-weight: bold;
                color: #2c3e50;
                text-align: center;
                margin-bottom: 35px;
                position: relative;
                padding-bottom: 15px;
            }

            .register-title::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                width: 60px;
                height: 3px;
                background: linear-gradient(90deg, #4CAF50, #45a049);
                border-radius: 3px;
            }

            .form-group {
                margin-bottom: 25px;
            }

            .input-group {
                width: 100%;
            }

            .input-group-addon {
                min-width: 80px;
                text-align: center;
                background: #f8f9fa;
                border: 1px solid #e0e0e0;
                border-right: none;
                border-radius: 10px 0 0 10px;
                padding: 12px 15px;
                color: #555;
                font-weight: 500;
            }

            .form-control {
                border-radius: 10px;
                padding: 12px 15px;
                border: 1px solid #e0e0e0;
                transition: all 0.3s;
                font-size: 15px;
                height: auto;
            }

            .form-control:focus {
                border-color: #4CAF50;
                box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.15);
            }

            .btn-register {
                background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
                color: white;
                border: none;
                padding: 14px 20px;
                border-radius: 10px;
                width: 100%;
                font-size: 16px;
                font-weight: bold;
                transition: all 0.3s;
                margin-top: 10px;
                text-transform: uppercase;
                letter-spacing: 1px;
            }

            .btn-register:hover {
                background: linear-gradient(135deg, #45a049 0%, #4CAF50 100%);
                transform: translateY(-2px);
                box-shadow: 0 5px 15px rgba(76, 175, 80, 0.3);
            }

            .btn-register:active {
                transform: translateY(0);
            }

            .error-message {
                color: #dc3545;
                font-size: 13px;
                margin-top: 6px;
                display: none;
                padding-left: 5px;
                font-weight: 500;
            }

            select.form-control {
                appearance: none;
                background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
                background-repeat: no-repeat;
                background-position: right 10px center;
                background-size: 15px;
                padding-right: 30px;
            }

            @media (max-width: 576px) {
                .register-card {
                    padding: 30px 20px;
                    margin: 15px;
                }

                .register-title {
                    font-size: 24px;
                    margin-bottom: 25px;
                }

                .form-control,
                .input-group-addon {
                    padding: 10px 12px;
                }
            }

            /* 添加输入框焦点时的动画效果 */
            .form-control:focus {
                transform: translateY(-1px);
            }

            /* 添加输入框hover效果 */
            .form-control:hover {
                border-color: #bdbdbd;
            }

            /* 添加必填字段标记 */
            .input-group-addon::after {
                content: '*';
                color: #dc3545;
                margin-left: 4px;
            }

            /* 添加表单组动画 */
            .form-group {
                animation: fadeInUp 0.5s ease-out;
                animation-fill-mode: both;
            }

            @keyframes fadeInUp {
                from {
                    opacity: 0;
                    transform: translateY(20px);
                }

                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }

            /* 为每个表单组添加延迟动画 */
            .form-group:nth-child(1) {
                animation-delay: 0.1s;
            }

            .form-group:nth-child(2) {
                animation-delay: 0.2s;
            }

            .form-group:nth-child(3) {
                animation-delay: 0.3s;
            }

            .form-group:nth-child(4) {
                animation-delay: 0.4s;
            }

            .form-group:nth-child(5) {
                animation-delay: 0.5s;
            }

            .form-group:nth-child(6) {
                animation-delay: 0.6s;
            }
        </style>
    </head>

    <body>
        <div class="register-container">
            <div class="register-card">
                <h2 class="register-title">读者注册</h2>
                <form action="reader_add_do1.html" method="post" id="readeredit">
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon">密码</span>
                            <input type="password" class="form-control" name="password" id="password"
                                placeholder="请输入密码（至少6位）">
                        </div>
                        <div class="error-message" id="password-error"></div>
                    </div>

                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon">姓名</span>
                            <input type="text" class="form-control" name="name" id="name" placeholder="请输入姓名">
                        </div>
                        <div class="error-message" id="name-error"></div>
                    </div>

                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon">性别</span>
                            <select class="form-control" name="sex" id="sex">
                                <option value="">请选择性别</option>
                                <option value="男">男</option>
                                <option value="女">女</option>
                            </select>
                        </div>
                        <div class="error-message" id="sex-error"></div>
                    </div>

                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon">生日</span>
                            <input type="date" class="form-control" name="birth" id="birth">
                        </div>
                        <div class="error-message" id="birth-error"></div>
                    </div>

                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon">地址</span>
                            <input type="text" class="form-control" name="address" id="address" placeholder="请输入详细地址">
                        </div>
                        <div class="error-message" id="address-error"></div>
                    </div>

                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon">电话</span>
                            <input type="tel" class="form-control" name="phone" id="phone" placeholder="请输入11位手机号码">
                        </div>
                        <div class="error-message" id="phone-error"></div>
                    </div>

                    <button type="submit" class="btn btn-register">立即注册</button>
                </form>
            </div>
        </div>

        <script>
            $(document).ready(function () {
                // 表单验证
                function validateForm() {
                    let isValid = true;

                    // 密码验证
                    if ($("#password").val().length < 6) {
                        $("#password-error").text("密码长度至少为6位").show();
                        isValid = false;
                    } else {
                        $("#password-error").hide();
                    }

                    // 姓名验证
                    if ($("#name").val().trim() === '') {
                        $("#name-error").text("请输入姓名").show();
                        isValid = false;
                    } else {
                        $("#name-error").hide();
                    }

                    // 性别验证
                    if ($("#sex").val() === '') {
                        $("#sex-error").text("请选择性别").show();
                        isValid = false;
                    } else {
                        $("#sex-error").hide();
                    }

                    // 生日验证
                    if ($("#birth").val() === '') {
                        $("#birth-error").text("请选择生日").show();
                        isValid = false;
                    } else {
                        $("#birth-error").hide();
                    }

                    // 地址验证
                    if ($("#address").val().trim() === '') {
                        $("#address-error").text("请输入地址").show();
                        isValid = false;
                    } else {
                        $("#address-error").hide();
                    }

                    // 电话验证
                    const phoneRegex = /^1[3-9]\d{9}$/;
                    if (!phoneRegex.test($("#phone").val())) {
                        $("#phone-error").text("请输入正确的手机号码").show();
                        isValid = false;
                    } else {
                        $("#phone-error").hide();
                    }

                    return isValid;
                }

                // 提交表单
                $("#readeredit").submit(function (e) {
                    if (!validateForm()) {
                        e.preventDefault();
                    }
                });

                // 实时验证
                $("input, select").on('input change', function () {
                    validateForm();
                });

                // 添加输入框焦点效果
                $('.form-control').focus(function () {
                    $(this).parent().parent().addClass('focused');
                }).blur(function () {
                    $(this).parent().parent().removeClass('focused');
                });
            });
        </script>
    </body>

    </html>